<template>
    <div class="app-container">
         <div class="filter-container">
            <el-select v-model="addrArr.province" placeholder="请选择省份" clearable class="filter-item" style="width: 150px" @change="addrChange('province')">
                <el-option v-for="item in provinces" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
            <el-select v-model="addrArr.city" placeholder="请选择城市" clearable class="filter-item" style="width: 150px" @change="addrChange('city')">
                <el-option v-for="item in citys" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
            <el-select v-model="addrArr.county" placeholder="请选择区/县" clearable class="filter-item" style="width: 150px" @change="addrChange('county')">
                <el-option v-for="item in countys" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
            <el-select v-model="addrArr.town" placeholder="请选择街道" clearable class="filter-item" style="width: 150px" @change="addrChange('town')">
                <el-option v-for="item in towns" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
            <el-select v-model="addrArr.village" placeholder="请选择社区/村" clearable class="filter-item" style="width: 150px" @change="addrChange('village')">
                <el-option v-for="item in villages" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
            <el-cascader
                placeholder="请选择地址"
                :options="selectProvinces"
                @active-item-change="handleItemChange"
                :props="props"
                v-model="address"
            ></el-cascader>
        </div>
        <div class="tab-container">
            <el-tabs v-model="tabActiveName" @tab-click="handleClick" :stretch="true">
                <el-tab-pane label="国家管理" name="country">
                    <el-table
                        :data="countrys"
                        border
                        style="width: 100%">
                        <el-table-column
                            prop="zh_name"
                            label="中文">
                        </el-table-column>
                        <el-table-column
                            prop="en_name"
                            label="英文">
                        </el-table-column>
                        <el-table-column
                            prop="short_name"
                            label="缩写">
                        </el-table-column>
                        <el-table-column
                            prop="phone_code"
                            label="手机代码">
                        </el-table-column>
                    </el-table>
                    <pagination :background="true" v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="handleClick({name: 'country', label: '国家管理', page: listQuery.page})"/>
                </el-tab-pane>
                <el-tab-pane label="省份管理" name="province">
                    <el-table
                        :data="provinces"
                        border
                        style="width: 100%">
                        <el-table-column
                            prop="name"
                            label="名称">
                        </el-table-column>
                        <el-table-column
                            prop="code"
                            label="代码">
                        </el-table-column>
                        <el-table-column
                            prop="parent_code"
                            label="父级代码">
                        </el-table-column>
                    </el-table>
                    <pagination :background="true" v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="handleClick({name: 'province', label: '省份管理', page: listQuery.page})"/>
                </el-tab-pane>
                <el-tab-pane label="城市管理" name="city">
                    <el-table
                        :data="citys"
                        border
                        style="width: 100%">
                        <el-table-column
                            prop="name"
                            label="名称">
                        </el-table-column>
                        <el-table-column
                            prop="code"
                            label="代码">
                        </el-table-column>
                        <el-table-column
                            prop="parent_code"
                            label="父级代码">
                        </el-table-column>
                    </el-table>
                    <pagination :background="true" v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="handleClick({name: 'city', label: '城市管理', page: listQuery.page})"/>
                </el-tab-pane>
                <el-tab-pane label="县/区管理" name="county">
                    <el-table
                        :data="countys"
                        border
                        style="width: 100%">
                        <el-table-column
                            prop="name"
                            label="名称">
                        </el-table-column>
                        <el-table-column
                            prop="code"
                            label="代码">
                        </el-table-column>
                        <el-table-column
                            prop="parent_code"
                            label="父级代码">
                        </el-table-column>
                    </el-table>
                    <pagination :background="true" v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="handleClick({name: 'county', label: '县/区管理', page: listQuery.page})"/>
                </el-tab-pane>
                <el-tab-pane label="街道管理" name="town">
                    <el-table
                        :data="towns"
                        border
                        style="width: 100%">
                        <el-table-column
                            prop="name"
                            label="名称">
                        </el-table-column>
                        <el-table-column
                            prop="code"
                            label="代码">
                        </el-table-column>
                        <el-table-column
                            prop="parent_code"
                            label="父级代码">
                        </el-table-column>
                    </el-table>
                    <pagination :background="true" v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="handleClick({name: 'town', label: '街道管理', page: listQuery.page})"/>
                </el-tab-pane>
                <el-tab-pane label="社区管理" name="village">
                    <el-table
                        :data="villages"
                        border
                        style="width: 100%">
                        <el-table-column
                            prop="name"
                            label="名称">
                        </el-table-column>
                        <el-table-column
                            prop="code"
                            label="代码">
                        </el-table-column>
                        <el-table-column
                            prop="parent_code"
                            label="父级代码">
                        </el-table-column>
                    </el-table>
                    <pagination :background="true" v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="handleClick({name: 'village', label: '社区管理', page: listQuery.page})"/>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
import { getDivide, getCitysByProvinceCode, getCountysByCityCode, getTownsByCountyCode, getVillagesByTownCode } from '@/api/crawler/divide';
import waves from '@/directive/waves';
import 'viewerjs/dist/viewer.css'
import Pagination from '@/components/Pagination';

export default {
    name: 'divide',
    directives: { waves },
    components: { Pagination },
    data() {
        return {
            addrArr: {},
            selectProvinces: [],
            address: [],
            tabActiveName: 'country',
            total: 0,
            listQuery: {
                page: 1,
                pageSize: 10
            },
            countrys: [],
            provinces: [],
            citys: [],
            countys: [],
            towns: [],
            villages: [],
            props: {
                value: 'value',
                label: 'label',
                children: 'children'
            }
        }
    },
    created() {
        // 选择一级
        getDivide({
            type: 'province',
        }).then(res => {
            this.provinces = res.data.data.list
            this.selectProvinces = [];
            for (let item of this.provinces) {
                this.selectProvinces.push({
                    value: 'province' + '-' + item.code,
                    label: item.name,
                    children: []
                });
            }
        }).catch(err => {
            throw new Error('错误：' + err);
        });
        // tab默认选中国家管理
        this.handleClick({
            name: 'country',
            label: '国家管理'
        });
    },
    methods: {
        addrChange(type) {
            switch (type) {
                case 'province':
                    for (let key in this.addrArr) {
                        if (key != 'province') {
                            this.addrArr[key] = '';
                        }
                    }
                    getCitysByProvinceCode({
                        code: this.addrArr.province
                    }).then(res => {
                        this.citys = res.data.data;
                    });
                    break;
                case 'city':
                    for (let key in this.addrArr) {
                        if (key != 'province' && key != 'city') {
                            this.addrArr[key] = '';
                        }
                    }
                    getCountysByCityCode({
                        code: this.addrArr.city
                    }).then(res => {
                        this.countys = res.data.data;
                    });
                    break;
                case 'county':
                    for (let key in this.addrArr) {
                        if (key != 'province' && key != 'city' && key != 'county') {
                            this.addrArr[key] = '';
                        }
                    }
                    getTownsByCountyCode({
                        code: this.addrArr.county
                    }).then(res => {
                        this.towns = res.data.data;
                    });
                    break;
                case 'town':
                    for (let key in this.addrArr) {
                        if (key != 'province' && key != 'city' && key != 'county' && key != 'town') {
                            this.addrArr[key] = '';
                        }
                    }
                    getVillagesByTownCode({
                        code: this.addrArr.town
                    }).then(res => {
                        this.villages = res.data.data;
                    });
                    break;
                default:
                    // statements_def
                    break;
            }
        },
        handleClick(tab) {
            this.listQuery.page = tab.page || 1;
            getDivide(Object.assign(this.listQuery, {type: tab.name})).then(res => {
                this[tab.name + 's'] = res.data.data.list;
                this.total = res.data.data.total
            }).catch(err => {
                throw new Error('获取' + tab.label + '错误：' + err);
            });
        },
        handleItemChange(val) {
            let code;
            console.log(val)
            if (val.length == 1) {
                code = val[0].split('-')[1];
                getCitysByProvinceCode({
                    code: code
                }).then(res => {
                    let citys = [];
                    for (let item of res.data.data) {
                        citys.push({
                            value: 'city-' + item.code,
                            label: item.name,
                            children: []
                        });
                    }
                    this.selectProvinces.forEach((item, index) => {
                        if (item.value == 'province-' + code) {
                            this.selectProvinces[index].children = citys;
                        }
                    });
                }).catch(err => {
                    throw new Error('获取城市列表错误：' + err);
                });
            } else if (val.length == 2) {
                code = val[1].split('-')[1];
                getCountysByCityCode({
                    code: code
                }).then(res => {
                    let countys = [];
                    for (let item of res.data.data) {
                        countys.push({
                            value: 'town-' + item.code,
                            label: item.name,
                            children: []
                        });
                    }
                    this.selectProvinces.forEach((item, index) => {
                        if (item.value == val[0]) {
                            item.children.forEach((subItem, subIndex) => {
                                this.selectProvinces[index].children[subIndex].children = countys;
                            });
                        }
                    });
                }).catch(err => {
                    throw new Error('获取城市列表错误：' + err);
                });
            } else if (val.length == 3) {
                code = val[2].split('-')[1];
                getTownsByCountyCode({
                    code: code
                }).then(res => {
                    let towns = [];
                    for (let item of res.data.data) {
                        towns.push({
                            value: 'village-' + item.code,
                            label: item.name,
                            children: []
                        });
                    }
                    this.selectProvinces.forEach((item, index) => {
                        if (item.value == val[0]) {
                            item.children.forEach((subItem, subIndex) => {
                                if (subItem.value == val[1]) {
                                    subItem.children.forEach((thItem, thIndex) => {
                                        if (thItem.value == val[2]) {
                                            this.selectProvinces[index].children[subIndex].children[thIndex].children = towns;
                                        }
                                    });
                                }
                            });
                        }
                    });
                }).catch(err => {
                    throw new Error('获取城市列表错误：' + err);
                });
            } else if (val.length == 4) {
                code = val[3].split('-')[1];
                getVillagesByTownCode({
                    code: code
                }).then(res => {
                    let villages = [];
                    if (res.data.data.length == 0) {
                        return this.selectProvinces.forEach((item, index) => {
                            if (item.value == val[0]) {
                                item.children.forEach((subItem, subIndex) => {
                                    if (subItem.value == val[1]) {
                                        subItem.children.forEach((thItem, thIndex) => {
                                            if (thItem.value == val[2]) {
                                                thItem.forEach((foItem, foIndex) => {
                                                    if (foItem.value == val[3]) {
                                                        delete this.selectProvinces[index].children[subIndex].children[thIndex].children[foIndex].children;
                                                    }
                                                });
                                            }
                                        });
                                    }
                                });
                            }
                        });
                    }
                    for (let item of res.data.data) {
                        villages.push({
                            value: 'village-' + item.code,
                            label: item.name,
                            children: []
                        });
                    }
                    this.selectProvinces.forEach((item, index) => {
                        if (item.value == val[0]) {
                            item.children.forEach((subItem, subIndex) => {
                                if (subItem.value == val[1]) {
                                    subItem.children.forEach((thItem, thIndex) => {
                                        if (thItem.value == val[2]) {
                                            thItem.forEach((foItem, foIndex) => {
                                                if (foItem.value == val[3]) {
                                                    this.selectProvinces[index].children[subIndex].children[thIndex].children[foIndex].children = villages;
                                                }
                                            });
                                        }
                                    });
                                }
                            });
                        }
                    });
                }).catch(err => {
                    throw new Error('获取城市列表错误：' + err);
                });
            }
        }
    }
}

</script>

<style lang="scss" scoped>
    .filter-container {
        padding-bottom: 10px;
    }
</style>
